<template>
  <div class="petitionReport">
    <div class = "tabTitle">
			<span>信访举报</span>
		</div>
    <div class="search">
			<div class = "searchLeft">
        <div style = "display: inline-block;margin-top:22px;">
					<span>公司名称：</span>
					<el-select v-model = "queryParam.personOrgId" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option :label = "'全部'" :value = "''"></el-option>
						<el-option v-for = "(item, index) in personOrgOptions" :key = "index" :label = "item.name" :value = "item.id"></el-option>
					</el-select>
				</div>
				<div style = "display: inline-block;margin-top:22px;">
					<span>处理状态：</span>
					<el-select v-model = "queryParam.status" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option v-for = "(item, index) in statusOptions" :key = "index" :label = "item.label" :value = "item.value"></el-option>
					</el-select>
				</div>
        <div style="display: inline-block;margin-right:12px;margin-top:22px;">
					<span class = "demonstration">举报时间：</span>
            <el-date-picker
              placeholder = "开始日期"
              style = "width:160px;margin-right:12px"
              v-model = "queryParam.startLocalDate" 
              :clearable = "true"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOptions"
            ></el-date-picker>至
            <el-date-picker
              placeholder = "结束日期"
              style = "width:160px;margin-left:12px"
              v-model = "queryParam.endLocalDate"
              :clearable = "true"
              value-format="yyyy-MM-dd"
              :picker-options="endPickerOptions"
            ></el-date-picker>
				</div>
        <div style = "display: inline-block; margin-top:22px;">
					<span>举报人：</span>
					<el-input v-model = "queryParam.name" placeholder = "请输入内容" style = "width:154px;margin-right:20px" clearable></el-input>
				</div>
        <div style = "display: inline-block;margin-top:22px;">
					<span>举报方式：</span>
					<el-select v-model = "queryParam.type" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option v-for = "(item, index) in typeOptions" :key = "index" :label = "item.label" :value = "item.value"></el-option>
					</el-select>
				</div>
        <div style = "display: inline-block;margin-top:22px;">
					<span>举报来源：</span>
					<el-select v-model = "queryParam.sourceType" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option v-for = "(item, index) in sourceTypeOptions" :key = "index" :label = "item.label" :value = "item.value"></el-option>
					</el-select>
				</div>
				<el-button type = "primary" style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "query">查询</el-button>
				<el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "resetQueryParam">重置</el-button>
			</div>
      <div style="display:flex; align-items:center;" v-if="this.permissionBycode.includes(this.code + '-dc')">
        <el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "exportAll">导出</el-button>
      </div>
		</div>
    <div class="table_data">
			<tableComponent ref= "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
		</div>
		<div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
    <!-- <div class="content">
      <div class="content_table_data">
        <PetitionTable></PetitionTable>
      </div>
    </div> -->
  </div>
</template>
<script>
// import  PetitionTable from "./PetitionTable"
let _that;
import { exportExcel } from "@/utils/tools.js"
export default {
  components:{
    // PetitionTable,
    tableComponent: () => import('../comonComponent/table'),
  },
  data(){
    return{
      code: 'jdjb-xfjb',
      queryParam: {
        personOrgId: '', // 被举报人组织ID（非必填）
        status: '', // - 处理状态（非必填，0-待处理、1-已受理、2-已驳回、null和空字符-全部）
        startLocalDate: '', // - 举报查询开始时间（非必填，日期格式：yyyy-MM-dd，如果只输入startLocalDate而没有输入endLocalDate，则查询时间的范围大于等于startLocalDate）
        endLocalDate: '', // - 举报查询结束时间（非必填，日期格式：yyyy-MM-dd，如果只输入endLocalDate而没有输入startLocalDate，则查询时间的范围小于等于endLocalDate）
        name: '', // - 举报人名称（非必填，支持模糊查询）
        type: '', // - 举报方式（非必填，1-匿名举报、2-实名举报、null和空字符-全部）
        sourceType: '', // - 举报来源（非必填，1-网页、2-二维码、null和空字符-全部）
      },
      // 公司名称options
      personOrgOptions: [],
      // 处理状态options
      statusOptions: [
        {label: '全部', value: ''},
        {label: '待处理', value: '0'},
        {label: '已受理', value: '1'},
        {label: '已驳回', value: '2'},
      ],
      startPickerOptions: {
        disabledDate(time) {
          return _that.queryParam.endLocalDate ? (time.getTime() >= new Date(_that.queryParam.endLocalDate).getTime() || time.getTime() >= Date.now()) : time.getTime() >= Date.now()
        }
      },
      endPickerOptions: {
        disabledDate(time) {
          return _that.queryParam.startLocalDate ? (time.getTime() <= new Date(_that.queryParam.startLocalDate).getTime() || time.getTime() >= Date.now()) : time.getTime() >= Date.now()
        }
      },
      typeOptions: [
        {label: '全部', value: ''},
        {label: '匿名举报', value: '1'},
        {label: '实名举报', value: '2'},
      ],
      sourceTypeOptions: [
        {label: '全部', value: ''},
        {label: '网页', value: '1'},
        {label: '二维码', value: '2'},
      ],
      //表格数据
				tableData: [ ],
				tableLabel: [
        { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
        { prop : 'personName', label : '被举报人', minWidth: '120', fixed : false, render : false, align : 'center'},
        { prop : 'personOrgName', label : '公司名称 ', minWidth: '120', fixed : false, render : false, align : 'center'},
        { prop : 'title', label : '举报标题 ', minWidth: '250', fixed : false, render : false, align : 'center'},
        { prop : 'issueType', label : '问题类型 ', minWidth: '120 ', fixed : false, render : false, align : 'center',
          render: (h, params, data) => { 
            let issueTypeValue = this.issueTypeOPtions.find(item => item.itemValue == params.row.issueType) ? this.issueTypeOPtions.find(item => item.itemValue == params.row.issueType).itemName : ''
            return h('span', {}, issueTypeValue)
          }
        },
        { prop : 'sourceType', label : '举报来源 ', minWidth: '130', fixed : false, render : false, align : 'center',
          render: (h, params, data) => { 
            return h('span', {}, (params.row.sourceType === '1' ? '网页' : params.row.sourceType === '2' ? '二维码' : ''))
          }
        },
        { prop : 'type', label : '举报方式 ', minWidth: '120', fixed : false, render : false, align : 'center',
          render: (h, params, data) => { 
              return h('span', {}, (params.row.type === '1' ? '匿名举报' : params.row.type === '2' ? '实名举报' : ''))
            }
        },
        { prop : 'status', label : '受理程度 ', minWidth: '120', fixed : false, render : false, align : 'center',
          render: (h, params, data) => { 
              return h('span', {}, (params.row.status === '0' ? '待处理' : params.row.status === '1' ? '已受理' : params.row.status === '2' ? '已驳回' : ''))
            }
        },
        { prop : 'createdTime', label : '举报时间', minWidth: '220 ', fixed : false, render : false, align : 'center'},
        { prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
          render : (h, params, data) => { 
            return h( 'span', {}, [ 
              h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '-xq') ? '' : 'none'}, class:'', props:{ size: 'mini' }, on : {
                click : () => {
                  // this.preview(params)
                  this.$router.push({path: '/index/SuperviseAndReport/PetitionReport/PetitionReportDetail', query:{id:params.row.id, type:'view'}})
                }
              } }, '预览' ), 
              h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '-sp') && params.row.status === '0' ? 'initial' : 'none'}, class:'', props:{ type: 'primary', size: 'mini' }, on : {
                click : () => {
                  // this.deal(params)
                  this.$router.push({path: '/index/SuperviseAndReport/PetitionReport/PetitionReportDetail', query:{id:params.row.id, type:'deal'}})
                }
              } }, '受理'),
            ])
          } 
        }
      ],
      tableOption : {
        loading: false,
        stripe: false,
        highlightCurrentRow : false,
        border : true,
        height : 610,
        maxHeight : '',
        resizable: false,
        headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
        cellStyle: {height: '50px', padding: 0 }
      },
      // 分页配置参数
				paginationPageSizes: [10, 30, 50],
				paginationParam: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
        },
        issueTypeOPtions: []
        
    } 
  },
  computed: {
    permissionBycode(){
      return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
    },
  },
  mounted() {
    console.log(this.$route)
    if (!this.permissionBycode.includes(this.code + '-xq') && !this.permissionBycode.includes(this.code + '-sp')) {
      this.tableLabel.splice(this.tableLabel.length - 1, 1)
    }
    _that = this
    this.queryData()
    this.getComplainCompanyList()
    this.dictList('ISSUE_TYPE')
  },
  methods: {
    // 字典查询接口
    dictList(typeCode, pItemValue) {
        this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
            if(res && res.code === '0') {
              this.issueTypeOPtions = res.data
            } else {
              this.issueTypeOPtions = []
              this.$message.warning(res.message)
            }
            
        })
    },
    // 公司名称下拉列表
    getComplainCompanyList () {
      this.Api.getComplainCompanyList().then(res => {
        if (res && res.code === '0') {
          this.personOrgOptions = res.data
        } else {
          this.personOrgOptions = []
          this.$message.warning(res.message)
        }
      })
    },
    // 信访举报的数据列表数据获取
    queryData () {
      let data  = JSON.parse(JSON.stringify(this.queryParam))
      data.pageNum = this.paginationParam.pageNum.toString()
      data.pageSize = this.paginationParam.pageSize.toString()
      this.Api.getComplainPage(data).then(res => {
        if (res && res.code === '0') {
          this.tableData = res.data.records
          this.paginationParam.total = res.data.total
        } else {
          this.tableData = []
          this.paginationParam.total = 0
          this.$message.warning(res.message)
        }
      })
    },
    // 查询
    query() {
      console.log('查询')
      this.queryData()
    },
    // 搜索栏重置事件
    resetQueryParam() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam)
      this.queryData()
    },
    // 分页pageSize 改变触发事件 
    handleSizeChange(val) {
      this.paginationParam.pageSize = val
      this.queryData()
    },
    // 分页currentPage 改变触发事件
    handleCurrentChange(val) {
      this.paginationParam.pageNum = val
      this.queryData()
    },
    // 导出
    exportAll(){
      let data  = JSON.parse(JSON.stringify(this.queryParam))
      this.Api.getComplainExport(data).then(res => {
        exportExcel(res, '信访举报', 'xls')
        if (res && res.code === '0'){
          this.$message('导出成功')
        } else {
          // this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.petitionReport {
		width: 100%;
		padding:20px 20px 10px 20px;
		margin-bottom: 20px;
		background: #fff; 
		.tabTitle {
			line-height: 28px;
			font-size: 20px;
			color: #333333;
			font-weight: 600;
			user-select:none;
		}
		.search {
			margin: 20px 0;
			width:100%;
			display: flex;
			/deep/ .el-input__inner {
			height: 36px;
			}
			/deep/.el-icon-date
			{
			line-height: 36px;
			position: absolute;
				left: 0px;
			}
			/deep/.el-icon-arrow-up{
			line-height: 36px;
			}
			.searchLeft {
        flex: 1;
        
			}
		}
		.table_data {
			flex: 1;
		}
		.pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding-top:20px;
			padding-bottom:20px;
			line-height: normal;
			}
		}
	}
</style>
